import React, { Component } from 'react'
// import Notes from './Notes.jsx'
// import NoteActions from '../actions/NoteActions'
// import NoteStore from '../stores/NoteStore'
import Lanes from './Lanes.jsx'
import LaneActions from '../actions/LaneActions'
import LaneStore from '../stores/LaneStore'
import AltContainer from 'alt-container'
import './app.less'

class App extends Component {
  render() {
    return (
      <div>
        <div className="cs-box-container">
          <h2>This is the titleThis is the titleThis is the titleThis is the titleThis is the title</h2>
        </div>
        <button
          onClick={this.addLane}
          className="add-note"
        >
          +
        </button>
        <AltContainer
          stores={[LaneStore]}
          inject={{
            lanes: () => LaneStore.getState().lanes || []
          }}
        >
          <Lanes />
        </AltContainer>
      </div>
    )
  }
  addLane() {
    LaneActions.create({name: 'New Lane'})
  }
  // deleteNote = (id, e) => {
  //   // Avoid bubbling to edit
  //   e.stopPropagation()
  //   NoteActions.delete(id)
  // }
  // editNote = (id, task) => {
  //   // Don't modify if trying set an empty value
  //   if(!task.trim()) {
  //     return
  //   }
  //   NoteActions.update({id, task})
  // }
  // We are using an experimental feature known as property
  // initializer here. It allows us to bind the method `this`
  // to point at our *App* instance.
  //
  // Alternatively we could `bind` at `constructor` using
  // a line, such as this.addNote = this.addNote.bind(this);
  // addNote = () => {
  //   // It would be possible to write this in an imperative style.
  //   // I.e., through `this.state.notes.push` and then
  //   // `this.setState({notes: this.state.notes})` to commit.
  //   //
  //   // I tend to favor functional style whenever that makes sense.
  //   // Even though it might take more code sometimes, I feel
  //   // the benefits (easy to reason about, no side effects)
  //   // more than make up for it.
  //   // Libraries, such as Immutable.js, go a notch further.
  //   NoteActions.create({
  //     task: 'New Task'
  //   })
  // }
}

export default App